<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<center>
<body>
    <!--table: 表示表格的开始与结束
        tr(table row): 表示表格的一行
        td(table datacell): 表示表格的单元格,是真正存放数据的地方
        border: 表格边框 style="border-collapse: collapse;"合并边框线
        text-align:center; 文本水平对齐方式:居中 -->
    <table border="3" width="400" style="border-collapse: collapse" >
        <caption>学生信息表</caption>
        <tr style="accent-color: aquamarine">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td style="text-align: center">张嘉莉</td>
            <td style="text-align: center">20</td>
            <td style="text-align: center">女</td>
        </tr>
        <tr align="center" style="accent-color: aquamarine">
            <td>张晨佩</td>
            <td>18</td>
            <td>女</td>
        </tr>
        <tr align="center">
            <td>郝宇佳</td>
            <td>20</td>
            <td>女</td>
        </tr>
    </table>

    <hr>
    <table border="1" width="400">
        <tr align="center">
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr align="center">
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <!-- 跨行,竖着合并,从当前单元格开始,向下合并n个单元格,被合并的单元格要删掉! -->
            <td rowspan="3">2-4</td>
        </tr>
        <tr>
            <!-- 跨列,竖着合并,从当前单元格开始,向右合并n个单元格,被合并的单元格要删掉! -->
            <td align="center" colspan="3">3-1</td>
        </tr>
        <tr align="center">
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
        </tr>
    </table>
    <hr>
    <table border="1" width="400" cellspacing="0">
        <caption>购物车</caption>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>荣耀X60</td>
            <td>2601</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>华为 mateXT</td>
            <td>27399</td>
        </tr>
        <tr style="text-align: center;">
            <td>总价：</td>
            <td colspan="2">30000</td>
        </tr>
    </table>
</body>
</center>
</html>